<template>
  <el-dialog
    title="设置用户"
    :visible.sync="dialogVisible"
    destroy-on-close
    width="1024px">
    <div>
      <el-button @click="insertUser" size="mini" style="margin-bottom: 5px">添加</el-button>
      <vxe-table
        border
        resizable
        show-overflow
        keep-source
        ref="xTable"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :data="tableData">
        <vxe-table-column width="200" field="type" title="类型" :edit-render="{name: '$select', options: options, events: {change: typeChangeEvent}}"></vxe-table-column>
        <vxe-table-column field="data" title="人员">
          <template v-slot="{ row }">
            <vxe-button @click="selectUser(row)" v-if="row.type!==5">选择</vxe-button>
            <span style="margin-left: 5px">{{ userText(row) }}</span>
            <UserSelectDialog :ref="'UserSelectDialog'+row.id" v-if="row.type===1" multiple :value="row.data" @confirm="selectConfirm($event,row)"></UserSelectDialog>
            <DeptSelectDialog v-else-if="row.type===2" :ref="'DeptSelectDialog'+row.id" v-model="row.data"></DeptSelectDialog>
            <RelativeSelectDialog v-else-if="row.type===3" :ref="'RelativeSelectDialog'+row.id" v-model="row.data"></RelativeSelectDialog>
            <ScriptDialog v-else-if="row.type===4" :ref="'ScriptDialog'+row.id" v-model="row.data.text"></ScriptDialog>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" width="70" show-overflow>
          <template v-slot="{ row }">
            <vxe-button type="text" icon="el-icon-delete" @click="removeEvent(row)"></vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
    import UserSelectDialog from './UserSelectDialog'
    import DeptSelectDialog from './DeptSelectDialog'
    import RelativeSelectDialog from './RelativeSelectDialog'
    import Const from './Const'
    import ScriptDialog from './ScriptDialog'
    export default {
        components:{
          ScriptDialog,
          RelativeSelectDialog,
            DeptSelectDialog,
            UserSelectDialog
        },
        props: {
            value: {
                type: Object,
                default() {
                    return ''
                }
            }
        },
        data() {
            return {
                options:[
                    { label: '用户', value: 1 },
                    { label: '组', value: 2 },
                    { label: '相对岗位', value: 3},
                    { label: '脚本', value: 4 },
                    { label: '发起人', value: 5 },
                ],
                tableData:[],
                dialogVisible: false,
            }
        },
        computed: {

        },
        watch: {
            extended(n){
                this.init()
            }
        },
        methods: {
            init(){
                if(this.value&&!this.value.hasOwnProperty('selectList')){
                    this.$set(this.value,'selectList',[])
                }

            },
            removeEvent(row) {
               const index = this.tableData.findIndex(x=>x.id===row.id)
                this.tableData.splice(index,1)
            },
            typeChangeEvent(e,b){
                if([1,2].includes(e.row.type)){
                    e.row.data = []
                }else
                if([3].includes(e.row.type)){
                    e.row.data = {
                      type:1,
                      relation:1,
                    }
                }else
                if([4].includes(e.row.type)){
                    e.row.data = {
                      text:''
                    }
                }
            },
            selectConfirm(list,row) {
                row.data = list
            },
            confirm() {
                this.$emit('input', {
                    ...this.value,
                    userList:this.tableData
                })
                this.dialogVisible = false
            },
            userText(row){
                if(row.type===1){
                    return  row.data.map(x=>'【用户】'+x.nickName).join(',')
                }else
                if(row.type===2){
                    return  row.data.map(x=>'【组织】'+x.name).join(',')
                }else
                if(row.type===3){
                  var type = Const.RelativeType.find(x=>x.value===row.data.type)
                  var relation = Const.RelationType.find(x=>x.value===row.data.relation)
                  if(type){
                    return  `${type.label}${ row.data.field?'【'+row.data.field+'】':''}->${relation.label }->${ row.data.postName||'暂无'}`
                  }else {
                    return '请选择相对岗位'
                  }
                }else
              if(row.type===4){
                return  row.data.text||'请输入脚本'
              }
            },
            selectUser(row) {
                const refs = [0,'UserSelectDialog','DeptSelectDialog','RelativeSelectDialog','ScriptDialog']
                this.$refs[refs[row.type]+row.id].show()
            },
            insertUser(){
              const row = {
                id:new Date().getTime(),
                type:1,
                data:[]
              }
                this.tableData.push(row)
              this.$refs.xTable.setActiveRow(row)
            },
            open() {
               this.dialogVisible = true
            }
        },
        created() {
            let arr = this.value.userList
            if(!arr){
                arr = []
                this.$emit('input', {
                    ...this.value,
                    userList:arr
                })
            }
            this.tableData = arr
        },
        mounted() {

        },
    }
</script>
<style>
    .vxe-select--panel.is--transfer{
        z-index: 40000 !important;
    }
</style>
